<template>
	<div id="app" class="app-container">
		<Layout>
			<!-- 左侧导航栏 -->
			<template #left>
				<div class="aside"><SiteAside /></div>
			</template>
			<!-- 中间内容区域 -->
			<template #default>
				<router-view></router-view>
			</template>
		</Layout>
		<ToTop />
	</div>
</template>

<script>
import Layout from "@/components/Layout";
import SiteAside from "@/components/SiteAside";
import ToTop from "@/components/ToTop";

export default {
	name: "App",
	components: {
		Layout,
		SiteAside,
		ToTop,
	},
	data() {
		return {};
	},
	methods: {},
};
</script>

<style lang="less" scoped>
// 父组件影响子组件根元素样式
@import "~@/styles/mixin.less";
.app-container {
	.self-fill(fixed);
	height: 100%;
	.aside {
		width: 250px;
		height: 100%;
	}
}
</style>
